<template>
  <view class="container">
    <uni-nav-bar left-icon="back" title="余额提现" />
    <view class="process-box">
      <text>优享优品 (可用余额)</text>
      <text>{{ bankName }} ({{ cardTail }})</text>
    </view>
    <view class="cash-amount">
      <view class="item">
        <text>账户余额：</text>
        <input :value="balance" disabled />
        <text>元</text>
        <text @click="takeAll">全部提现</text>
      </view>
      <view class="item">
        <text>提现金额：</text>
        <input v-model="amount" type="number" placeholder="请输入提现金额" />
        <text>元</text>
      </view>
      <view class="item">
        <text>到账时间：</text>
        <input value="金额会在1-3工作日内到账" disabled />
      </view>
    </view>
    <button class="submit-btn" @click="submitWithdraw">完成</button>
  </view>
</template>

<script>
import api from '@/api/index.js';
export default {
  data() {
    return {
      balance: 0,
      amount: '',
      bankName: '',
      cardTail: ''
    };
  },
  onLoad() {
    this.loadBankInfo();
    this.loadBalance();
  },
  methods: {
    loadBankInfo() {
      // 假设从存储或API获取
      this.bankName = '光大银行';
      this.cardTail = '8888';
    },
    loadBalance() {
      api.wallet.getUserAccount().then(res => {
        this.balance = res.data.withdraw_money;
      });
    },
    takeAll() {
      this.amount = this.balance;
    },
    submitWithdraw() {
      if (!this.amount || this.amount > this.balance) {
        uni.showToast({ title: '金额无效', icon: 'none' });
        return;
      }
      api.wallet.withdraw({ balance: this.amount }).then(res => {
        uni.showToast({ title: '申请提交成功', icon: 'success' });
        this.amount = '';
      });
    }
  }
};
</script>

<style>
  .process-box { display: flex; justify-content: space-between; padding: 10px; }
  .cash-amount .item { display: flex; align-items: center; padding: 10px; }
  .submit-btn { margin: 20px; }
</style>